<template>
  <div class="box">
    <div class="bg_box">
      <img src="../../assets/images/bg_wallet.png" alt="">
      <div class="see">
        <router-link to="/transactionDetail"> 查看明细</router-link>
      </div>
      <div class="num">￥{{account.balance}}</div>
      <div class="cost_total">我的总金额（元）</div>
      <div class="income">
        <ul>
          <li>
            返利收入（元）
            <br/>
            <span>￥{{rebateIncome}}</span>
          </li>
          <li>
            交易收入（元）
            <br/>
            <span>￥{{account.withdrawBalance}}</span>
          </li>
          <!--<li>-->
            <!--打赏收入（元）-->
            <!--<br/>-->
            <!--<span>{{account.withdrawBalance}}</span>-->
          <!--</li>-->
        </ul>
      </div>
    </div>
    <!--最近两笔交易-->
    <div class="record">
      <div class="jy_title">最近交易记录</div>
      <!--<div class="record_li">-->
      <!--<ul>-->
      <!--<li v-for="item in accountList">-->
      <!--<div class="left">-->
      <!--周末-->
      <!--<br />-->
      <!--<span>07/09</span>-->
      <!--</div>-->
      <!--<div class="center">-->
      <!--{{item.type==0?'购买':item.type==1?'充值':item.type==2?'提现':item.type==3?'返利':'打赏'}}-->
      <!--<br />-->
      <!--<span>{{item.note}}</span>-->
      <!--</div>-->
      <!--<div class="right">{{item.newMoney - item.oldMoney}}</div>-->
      <!--</li>-->
      <!--</ul>-->
      <!--</div>-->
      <ul class="flex-box">
        <li v-for="item in accountList">
          <div class="li-left">
            <!--<div class="ll-img">-->
              <!--<img src="../../assets/images/p-1.png" alt="">-->
            <!--</div>-->
            <div class="center1">
              {{item.type==0?'购买':item.type==1?'充值':item.type==2?'提现':item.type==3?'返利':item.type==4?'打赏':item.type==5?'退款':'被打赏'}}
              <br />
              <!--<span style="">{{item.note}}</span>-->
            </div>
            <div class="ll-text">
              <div>{{item.note}}</div>
              <span>{{item.changeTime}}</span>
            </div>
          </div>
          <div class="li-right">
            <span v-if="item.type==0||item.type==2||item.type==4">-￥{{item.changeMoney}}</span>
            <span v-else="" style="color:#5eb95e">+￥{{item.changeMoney}}</span>
          </div>
        </li>
      </ul>
    </div>

    <!--按钮-->
    <div class="btn">
      <div class="cz_tx">
        <input type="button" value="充值" @click="popShow()">
      </div>
      <div class="cz_tx">
        <input type="button" value="提现" style="background: #f6f6f6;color: #333333;" @click="withdrawals()">
      </div>
    </div>
    <!--充值金额弹窗-->
    <div class="pay-pop" v-if="payPopShow">
      <div style="width:100%;height:100%;" @click="payPopShow=false"></div>
      <div class="pay-bg">
        <span style="color: #d44242">￥：</span><input name="pay" type="number" v-model="money"  placeholder="请输入充值金额" style="padding: 5px;"/>
        <div class="pay-btn" @click="recharge()">确认</div>
      </div>
    </div>
    <!--提现金额弹窗-->
    <div class="pay-pop" v-if="payPopShow1">
      <div style="width:100%;height:100%;" @click="payPopShow1=false"></div>
      <div class="pay-bg">
        <span style="color: #d44242">￥：</span><input name="pay" type="number" v-model="money"  placeholder="请输入提现金额" style="padding: 5px;"/>
        <div class="pay-btn" @click="recharge1()">确认申请</div>
      </div>
    </div>
    <div class="pay-pop" v-if="popTip">
      <div style="width:100%;height:100%;" @click="popTip=false"></div>
      <div class="pay-bg">
        很抱歉，提现功能正在完善中，请30天后再试。
      </div>
    </div>
  </div>
</template>

<script>
  import global from '../public/global.vue'

  export default {
    name: "my-wallet",
    data() {
      return {
        account: {},
        accountList: [],
        money:'',//充值金额
        payPopShow:false,
        rebateIncome:0,//返利收入
        payPopShow1:false,
        popTip:false,//维护提示
      }
    },
    methods:{
      withdrawals(){
        //this.payPopShow1=true;//提现弹窗
        this.popTip = true
      },
      popShow(){
        this.payPopShow=true;
      },
      recharge1(){
        if(this.money<=0||this.money>this.account.balance){
          alert("请输入正确的金额");
          return;
        }
        let params = new URLSearchParams();
        params.append('money', this.money);
        this.$http({
          method: "post",
          url: global.apiUrl + '/account/withdrawApply',
          data: params,
        }).then(res => {
          if(res.data.code==0){
            alert("申请成功");
          }else{
            alert(res.data.msg)
          }
        })
      },
      recharge(){
        if(this.money<=0){
          alert("请输入正确的金额")
          return;
        }
        let params = new URLSearchParams();
        params.append('money', this.money);
        this.$http({
          method: "post",
          url: global.apiUrl + '/account/recharge',
          data: params,
        }).then(res => {
          if (res.data.code == 0) {
            let billNo = res.data.data;
            let params = new URLSearchParams();
            params.append('billNo', billNo);
            this.$http({
              method: "post",
              url: global.apiUrl + '/pay/recharge',
              data: params,
            }).then(res => {
              if (res.data.code == 0) {
                this.appId = res.data.data.appId;
                this.nonceStr = res.data.data.nonceStr;
                this.paySign = res.data.data.paySign;
                this.prepay_id = res.data.data.package;
                this.timeStamp = res.data.data.timeStamp;

                this.onBridgeReady();

              }
            }).catch(function (err) {
              console.error(err);
            })
          }
        }).catch(function (err) {
          console.error(err);
        })
      },
      //微信支付接口调用
      onBridgeReady() {
        let self = this;
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": self.appId, //公众号名称，由商户传入
            "timeStamp": self.timeStamp, //时间戳，自1970年以来的秒数
            "nonceStr": self.nonceStr, //随机串
            "package": self.prepay_id,
            "signType": "MD5", //微信签名方式：
            "paySign": self.paySign //微信签名
          },
          function (res) {
            console.log("--支付拉起--")
            console.log(JSON.stringify(res));
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              //$.toast(JSON.stringify(res));
              // var html = '<div class="weui-msg"><div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div><div class="weui-msg__text-area"><h2 class="weui-msg__title">支付成功</h2></div></div>';
              //window.location = "/page/pay_success.html";
              self.isPop = false;
              // $("#content-box").html(html);
              // $.toast("支付成功", "text");
              // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
              //alert("支付成功");
              self.$router.go(0)
            } else {
              //$.toast(JSON.stringify(res));
//              $.toast("支付失败", "text");
              alert("支付失败");
            }
          }
        );

      },
      getIncome(){
        let url = global.apiUrl + "/account/income";
        this.$http.get(url).then(res => {
          console.log(res.data.data)
          this.rebateIncome = res.data.data
        })
      }
    },
    created: function () {
      document.title = "我的钱包";
      let self = this;
      let url = global.apiUrl + "/account/getAccount";
      //我的账户
      self.$http.get(url).then(res => {
        self.account = res.data.data;
      })
      //我的明细
      url = global.apiUrl + "/account/getAccountList";
      self.$http.get(url).then(res => {
        console.log(res.data.data)
        var list = res.data.data;
        if (list.length <= 7) {
          self.accountList = res.data.data;
        } else {
          self.accountList.push(res.data.data[0]);
          self.accountList.push(res.data.data[1]);
          self.accountList.push(res.data.data[2]);
          self.accountList.push(res.data.data[3]);
          self.accountList.push(res.data.data[4]);
          self.accountList.push(res.data.data[5]);
          self.accountList.push(res.data.data[6]);
        }
      })
      this.getIncome();
    },
  }
</script>

<style lang="less" scoped>
  .box {
    width: 100%;
    min-height: 120px;
    text-align: center;
    .bg_box {
      width: 100%;
      color: #FFF;
      img {
        width: 100%;
      }
      .see {
        position: absolute;
        top: 5px;
        right: 10px;
        font-size: 0.8rem;
        a{
          color:#fff;
          font-size: 1rem;
        }
      }
      .num {
        position: absolute;
        top: 60px;
        width: 100%;
        font-size: 1.8rem;
      }
      .cost_total {
        position: absolute;
        top: 110px;
        width: 100%;
        font-size: 0.7rem;
      }
      .income {
        width: 100%;
        position: absolute;
        top: 165px;
        font-size: 0.7rem;
        li {
          width: 50%;
          min-height: 35px;
          float: left;
          span {
            display: inline-block;
            margin-top: 5px;
            font-size: 0.8rem;
          }
        }
      }
    }
    .record {
      width: 95%;
      min-height: 40px;
      margin: 0 auto;
      .jy_title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: left;
        border-bottom: 1px solid #f5f5f5;
        font-size: 0.8rem;
        color: #D3D3D3;
      }
      .record_li {
        width: 100%;
        font-size: 0.9rem;
        li {
          width: 100%;
          height: 50px;
          text-align: left;
          border-bottom: 1px solid #f5f5f5;
          .left {
            width: 18%;
            min-height: 50px;
            float: left;
            font-size: 0.7rem;
            padding-top: 5px;
            color: #e4dede;
            span {
              display: inline-block;
              margin-top: 5px;
            }
          }
          .center1{
            width: 60%;
            min-height: 50px;
            float: left;
            font-size: 0.7rem;
            padding-top: 5px;
            color: #ccc6c6;
            span {
              display: inline-block;
              margin-top: 5px;
              font-size: 0.7rem;
            }
          }
          .right {
            width: 22%;
            min-height: 50px;
            float: left;
            font-size: 1rem;
            line-height: 50px;
            color: #ff0000;
            text-align: right;
          }
        }
      }
    }
    /*按钮*/
    .btn {
      width: 93%;
      min-height: 50px;
      margin: 10px auto;
      .cz_tx {
        width: 100%;
        margin-bottom: 15px;
        input {
          width: 100%;
          height: 40px;
          outline: none;
          border: none;
          font-size: 0.9rem;
          color: #FFF;
          background: #D53F40;
          border-radius: 6px;
        }
      }
    }
  }

  /*最近两笔交易*/
  .flex-box {
    width: 100%;
    li {
      width: 100%;
      padding: 3% 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      .li-left {
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        font-size: 0.9rem;
        .ll-img {
          display: inline-block;
          vertical-align: top;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }
        .ll-text {
          display: inline-block;
          width: 90%;
          font-size: 0.9rem;
          span {
            font-size: 0.7rem;
            color: #aaa;
          }
        }
      }
      .li-right {
        white-space: nowrap;
        font-size: 0.9rem;
        color: #D43F3F;
        line-height: 40px;
      }
    }
  }
  .pay-pop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    .pay-bg {
      position: absolute;
      top: 30%;
      left: 0;
      right: 0;
      width: 90%;
      margin: auto;
      background: #fff;
      padding: 5% 10%;
      border-radius: 6px;
      .price {
        height: 3rem;
        line-height: 3rem;
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 10px;
      }
      input {
        width: 200px;
        height: 30px;
        vertical-align: middle;
        margin: 0;
        font-size:0.95rem;
      }
      label {
        display: block;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        border-bottom: 1px solid #eee;
        font-size: 1rem;
        font-weight: inherit;
        input {
          -webkit-appearance: radio;
          width: 20px;
          height: 20px;
          vertical-align: middle;
          margin: 0;
        }
        span {
          margin-left: 10%;
          vertical-align: middle;
        }
      }
      .pay-btn {
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        font-size: 1rem;
        color: #fff;
        background: #d44242;
        border-radius: 6px;
        text-align: center;
        margin-top: 20px;
      }
    }
  }
</style>
